<template>
	<view class="content">
		
		<view class="list listTest clearfix">
			<view class="leftTest">
				<span>姓名</span>
			</view>
			<view class="rightTest ">
				<input type="text" v-model="name" class="personImg" placeholder="与证件保持一致，必填项" />
			</view>
		</view>
		<view class="list listTest clearfix">
			<view class="leftTest">
				<span>手机号</span>
			</view>
			<view class="rightTest ">
				<input type="number" v-model="mobile" class="personImg" placeholder="请输入，必填项" />
			</view>
		</view>
		<view class="list listTest clearfix" @tap="changeCode">
			<view class="leftTest">
				<span>证件类型</span>
			</view>
			<view class="rightTest ">
				<view class="personImg personImgNew">
					<span>{{cardType==1?'身份证':cardType==2?'护照':cardType==3?'港澳通行证':cardType==4?'台胞证':cardType==5?'台湾通行证':'回乡证'}}</span>
				</view>
				<img class="xiala" src="https://cdn.yueyangshuyuan.com/%E4%B8%8B%E6%8B%89.png" />
			</view>
		</view>
		<view class="list listTest clearfix">
			<view class="leftTest">
				<span>证件号码</span>
			</view>
			<view class="rightTest ">
				<input type="text" v-model="cardNo" class="personImg" placeholder="请输入" />
			</view>
		</view>
		<view class="changeBtn" @click="savePeople">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tourists:"",
				cardType:1,
				cardNo:"",
				mobile:"",
				headImgUrl:"",
				name:"",
				dataJson:{},
				num:""
			}
		},
		created() {
		   
		},
		
		onLoad:function(options){
			const that = this;
			this.id=options.id;
			this.num=options.num;
			if(this.id==0||this.id==null){
                
			}else {
				this.init(options.id);
				uni.setNavigationBarTitle({
					title: '编辑出游人' 
				})
				
			}

			if(options.tourists&&options.tourists.length>0){
				this.tourists=JSON.parse(options.tourists);
			}
		},
		methods:{
			init(id){
				// console.log(id,8989);
				this.$api.touristDetail({

				},id).then(json=>{
					this.name=json.name;
					this.cardType=json.status;
					this.cardNo=json.cardNo;
					this.mobile=json.mobile;
				})
			},
			//改变性别
			changeCode(){
				let _this=this;
				uni.showActionSheet({
				  itemList: ['身份证', '护照','港澳通行证','台胞证','台湾通行证','回乡证'],
				  success (res) {
					//  console.log(res.tapIndex);// 1 身份证、2 护照、3 港澳通行证、4 台胞证、5 台湾通行证、6 回乡证 ,
					 _this.cardType =res.tapIndex-0+1;
				  },
				  fail (res) {
				    // console.log(res.errMsg)  //点了取消
				  }
				})
			},
			savePeople(){
				if(!this.proofTest()){
                    return false;
				}
				if(this.id==0||this.id==null){ //新建
					 //tourist
					 this.$api.tourist({
						cardNo: this.cardNo,
						cardType: this.cardType,
						mobile: this.mobile,
						name: this.name
					}).then(json=>{
						uni.showToast({
							title: '保存成功',
							icon:"none",
							duration: 2000
						})
						 setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/peopleList/peopleList?num='+this.num+'&index=1'+"&tourists="+JSON.stringify(this.tourists)
							});
					    },2000);
						
					})
			    }else {  //编辑
                   this.$api.ediorTourist({
						cardNo: this.cardNo,
						cardType: this.cardType,
						mobile: this.mobile,
						name: this.name,
						id:this.id
					}).then(json=>{
						uni.showToast({
							title: '编辑成功',
							icon:"none",
							duration: 2000
						})
						 setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/peopleList/peopleList?num='+this.num+'&index=1'+"&tourists="+JSON.stringify(this.tourists)
							});
					    },2000);
						
					})
				}
			},
			// 去掉字符串前后空格
			Trim(str) {
				return str.replace(/(^\s*)|(\s*$)/g, "");
			},
			proofTest(){
                  if(this.Trim(this.name)==""){
					  uni.showToast({
						title: '姓名不能为空',
						icon:"none",
						duration: 2000
					  })
                        return false;
				  } 
				  if(this.Trim(this.name).length>10){
                       uni.showToast({
						title: '姓名必须1-10个字',
						icon:"none",
						duration: 2000
					  })
                      return false;
				  }
				  if(this.Trim(this.mobile)==""){
					  uni.showToast({
						title: '手机号不能为空',
						icon:"none",
						duration: 2000
					  })
                        return false;
				  } 
				  if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
						uni.showToast({
							title: '手机号格式不正确',
							icon:"none",
							duration: 2000
						})
                        return false;	
					}
				  if(this.Trim(this.cardNo)==""){
					  uni.showToast({
						title: '证件号不能为空',
						icon:"none",
						duration: 2000
					  })
                        return false;
				  } 
				  if(this.cardType==1){
                     if (!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.cardNo))) {
						uni.showToast({
							title: '身份证号格式不正确',
							icon:"none",
							duration: 2000
						})
						return false;
					 } 
				  }
				  return true;
					
			},
			// //跳转到修改昵称页面
			// changeName(){
			// 	uni.redirectTo({
			// 	    url: '/pages/userName/userName'
			// 	});
			// },
			//以下是时间戳函数
			getDate(){
				var myDate = new Date();
				//获取当前年
				var year = myDate.getFullYear();
				//获取当前月
				var month = myDate.getMonth() + 1;
				//获取当前日
				var date = myDate.getDate();
				var h = myDate.getHours(); //获取当前小时数(0-23)
				var m = myDate.getMinutes(); //获取当前分钟数(0-59)
				var s = myDate.getSeconds();
				//获取当前时间
				var now = year + '_' + this.conver(month) + "_" + this.conver(date) + "_" + this.conver(h) + '_' + this.conver(m) + "_" + this.conver(s);
				return now;
			},
			conver(s) {
					return s < 10 ? '0' + s : s;
			},
		},
	}
</script>

<style lang="scss">
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
	.content {
	    padding:0;
		margin:0;
		background: #fff;
		box-sizing: border-box;
		padding-bottom: 138upx;
	}
	body {
		background: #fff;
	}
	.listBorder {
		border-top: 2upx solid #E2E6EE;
	}
	.list {
		width:100%;
		height:150upx;
		padding:0upx 45upx;
		box-sizing: border-box;
		border-bottom: 2upx solid #E2E6EE;
		position: relative;
		.left {
			float: left;
			width:100upx;
			height:100%;
			line-height: 130upx;
			font-size: 32upx;
			color: #777777;
		}
		.right {
			float: left;
			width:560upx;
			height:100%;
			line-height: 150upx;
			.personImg {
				float: right;
				margin-right:40upx;
				width:400upx;
				img {
					display: block;
					width:130upx;
					height:130upx;
					border-radius:100%;
				}
			}
			
			.jiantou {
				float: right;
				height:100%;
				
				img {
					display: block;
					width:18upx;
					height:30upx;
					// margin-top:50upx;
					position: absolute;
					top:50%;
					margin-top:-15upx;
				}
			}
		}
		.leftTest {
			float: left;
			width:160upx;
			height:150upx;
			line-height: 150upx;
			font-size: 32upx;
			color: #777777;
		}
		.rightTest {
			float: left;
			width:480upx;
			margin-left:20upx;
			height:150upx;
			line-height: 150upx;
			position: relative;
			.personImg {
				float: left;
				margin-right:40upx;
				padding:50upx 0;
				font-size: 28upx;
                color: #262626;
			}
			.personImgNew {
				padding:0;
			}
			.xiala {
				float: right;
				width:30upx;
				height:18upx;
				margin-top:66upx;
			}
		}
	}
	.changeBtn {
		width:100%;
		height:108upx;
		background: #E25422;
        box-shadow: 0 -10px 16px 0 rgba(164,164,164,0.20);
		font-size: 32upx;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 108upx;
		position: fixed;
		left:0;
		bottom: 0;
		z-index: 9;
	}
</style>
